<!-- 环境温湿度填写弹框 -->
<template>
	<div class="fillin-box">
		<div class="month-title">{{ month }}</div>
		<div class="notice">温度：(°C)， 湿度：(%RH)</div>
		<div class="daytitle">
			<div class="day-item">一</div>
			<div class="day-item">二</div>
			<div class="day-item">三</div>
			<div class="day-item">四</div>
			<div class="day-item">五</div>
			<div class="day-item">六</div>
			<div class="day-item">日</div>
		</div>
		<div class="daycont">
			<div class="day-item" v-for="item of tablelist" :class="item.temperature == null && item.humidness == null ? '' : 'selact'" :key="item.id">
				<div v-if="item.temperatureHumidityId == 0" class="disabled">
					<div class="item-title">{{ item.day }}</div>
				</div>
				<div v-else>
					<div class="item-title">{{ item.day }}</div>
					<div class="selbox2" v-if="item.temperature == null && item.humidness == null">
						<el-button size="mini" type="primary" @click="setTemperature(item)">设置</el-button>
					</div>
					<div class="selbox" v-else>
						<div>
							<span>温度:</span>
							<el-input-number size="mini" v-model="item.temperature" placeholder="请输入温度" :min="-999999.99" :max="999999.99" :precision="2" :controls="false" @blur="changeTemperature(item)" />
						</div>
						<div>
							<span>湿度:</span>
							<el-input-number size="mini" v-model="item.humidness" placeholder="请输入湿度" :min="-999999.99" :max="999999.99" :precision="2" :controls="false" @blur="changeHumidness(item)" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { listFillin, getFillin, delFillin, addFillin, updateFillin } from "@/api/synthesize/store/fillin"
import { deepClone } from "@/utils/index"
export default {
	name: "FillIn",
	props: {
		pid: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			form: {},
			recordDate: undefined,
			tablelist: [],
			month: undefined
		}
	},
	methods: {
		// 获取月份数据列表
		getMonthList(id, recordDate) {
			this.recordDate = recordDate
			listFillin({ temperatureHumidityId: id }).then(ret => {
				this.getListData(ret.rows)
			})
		},
		// 获取月份列表按日历排序
		getListData(rows) {
			this.month = this.recordDate
			let firstday = this.recordDate + "-1"
			let date = new Date(firstday)
			let oneday = 60 * 60 * 24 * 1000
			let list = []
			let daynum = date.getDay()
			if (daynum == 0) {
				daynum = 7
			}
			for (let index = daynum - 1; index >= 1; index--) {
				let curdate = new Date(date.getTime() - oneday * index)
				list.push({
					id: Math.random(),
					temperature: undefined,
					temperatureHumidityId: 0,
					humidness: undefined,
					day: curdate.getDate()
				})
			}
			this.tablelist = list.concat(rows)
			// 补上最后几天
			let lastitem = this.tablelist[this.tablelist.length - 1]
			let lastday = new Date(this.recordDate + "-" + lastitem.day)
			for (let index = 0; index < 7; index++) {
				let curdate = new Date(lastday.getTime() + oneday * index)
				if (curdate.getDay() == "1") {
					break
				} else {
					if (index > 0) {
						this.tablelist.push({
							id: Math.random(),
							temperature: undefined,
							temperatureHumidityId: 0,
							humidness: undefined,
							day: curdate.getDate()
						})
					}
				}
			}
		},
		// 设置
		setTemperature(item) {
			item.temperature = 0
			item.humidness = 0
		},
		// 设置温度
		changeTemperature(item) {
			let data = deepClone(item)
			if (data.temperature == undefined) {
				data.temperature = null
			}
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			updateFillin(data)
				.then(() => {
					this.$modal.msgSuccess("操作成功")
					loading.close()
				})
				.finally(() => {
					loading.close()
				})
		},
		// 设置湿度
		changeHumidness(item) {
			let data = deepClone(item)
			if (data.humidness == undefined) {
				data.humidness = null
			}
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			})
			updateFillin(data)
				.then(() => {
					this.$modal.msgSuccess("操作成功")
					loading.close()
				})
				.finally(() => {
					loading.close()
				})
		}
	},
	created() {}
}
</script>

<style lang="scss" scoped>
.month-title {
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}
.fillin-box {
	width: 100%;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.daytitle,
.daycont {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.daytitle {
	background: #eaedf2;
	height: 40px;
	line-height: 40px;
}
.day-item {
	width: 14.2%;
}
.daycont {
	.day-item {
		width: 14.2%;
		border-left: 1px solid #eee;
		border-top: 1px solid #eee;
		min-height: 102px;
	}
}
.item-title {
	width: 100%;
}
.disabled {
	.item-title {
		color: #ccc;
	}
}
.selbox {
	width: 90%;
	overflow: hidden;
	margin: 10px auto;
	min-height: 60px;

	> div {
		display: flex;
		align-items: center;
		span {
			width: 50px;
			font-size: 0.8rem;
		}
	}
	> :first-child {
		margin-bottom: 6px;
	}
}
.selact {
	background: #ffefeb;

	::v-deep .el-input__inner {
		background: #ffefeb;
	}
}
.item-title {
	padding-left: 8px;
}
.selbox2 {
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
::v-deep .el-input-number--mini {
	width: 100%;
}
::v-deep .el-input-number.is-without-controls .el-input__inner {
	padding-right: 6px !important;
	padding-left: 6px !important;
}
.notice {
	text-align: right;
}
</style>
